<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { updateUserForm, updateUser } from "@/api/sys/user";
import { getRoleList } from "@/api/sys/role";
import { getOrgList } from "@/api/sys/org";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const userForm = ref<updateUserForm>();

const dialogVisible = ref(false);

const showEditDialog = (row: any) => {
  console.log(row);
  userForm.value = {
    userId: row.userId,
    status: row.status,
    accountLv: row.accountLv,
    orgId: row.orgId,
    nickname: row.extend.nickname,
    email: row.extend.email,
    cityCode: row.extend.cityCode
  };
  getRoleList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.roleName,
        value: item.roleId
      });
      roleList.value = li;
    });
  });
  getOrgList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.orgName,
        value: item.id
      });
      orgList.value = li;
    });
  });
  dialogVisible.value = true;
};

const onSubmit = () => {
  updateUser(userForm.value).then(() => {
    dialogVisible.value = false;
    onSearchTable();
  });
};

const roleList = ref<any>([]);
const orgList = ref<any>([]);
const statusOptions = [
  {
    label: "正常",
    value: 1
  },
  {
    label: "冻结",
    value: 2
  }
];
const accessLvOptions = [
  {
    label: "管理员",
    value: 2
  },
  {
    label: "用户",
    value: 3
  }
];
defineExpose({
  showEditDialog
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="更新用户信息">
    <el-form ref="elForm" :model="userForm" label-width="100px">
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="userForm.nickname"
          placeholder="请输入用户昵称，未输入默认按账户填充"
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="userForm.status">
          <el-radio
            v-for="(item, index) in statusOptions"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账户级别" prop="accountLv">
        <el-radio-group v-model="userForm.accountLv">
          <el-radio
            v-for="(item, index) in accessLvOptions"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="userForm.email"
          placeholder="请输入用户邮箱"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="行政编码" prop="cityCode">
        <el-input
          v-model="userForm.cityCode"
          placeholder="请输入用户所在城市的行政编码"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="部门" prop="orgId">
        <el-select
          v-model="userForm.orgId"
          placeholder="请选择用户所属部门"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in orgList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
